<template>
	<scroll-view scroll-y :scroll-top="scrollTop" @scroll="_scroll" class="_page"
	:class="{nonePadding: !!notShowClaimOutLine }" >
		<!-- #ifdef APP-PLUS||MP -->
		<uni-nav-bar dark fixed backgroundStyle="#205bd0" color="#FFFFFF" status-bar>
			<template slot="left">
				<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#FFFFFF" size="24"></uni-icons>
			</template>
			<template>
				<view class="nav_title" style="color: #ffffff">报考数据</view>
			</template>
			<!-- #ifdef APP-PLUS||H5 -->
			<template slot="right">
				<view class="_right" @click.stop="_shareOpen">
					<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
					<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
					<text class="text">分享</text>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<!-- 截图区域 -->
		<view id="htmlCanvas">
			<view class="_bg">
				<view class="info-box">
					<view class="title-box">
						<view class="title">{{ info.university_school_name || info.major_name }}</view>
						<view class="type" v-if="info.major_type">{{ info.major_type }}</view>
					</view>
					<view class="major">{{ info.university_school_name ? info.major_name || arrayToString(info.join_major, '/') : arrayToString(info.join_major, '/') }}</view>

					<!-- 统计数据 -->
					<view class="statistics-box" v-if="info.detail && info.detail.length">
						<view class="_lis" v-show="item.val || item.val === 0" v-for="(item, index) in info.detail" :key="index">
							<view class="text">{{ info.new_year }}{{ item.key }}</view>
							<view class="value">{{ item.val }}</view>
						</view>
					</view>
				</view>
				<!-- 专业详情 -->
				<view class="detail-box">
					<!-- 考试科目 -->
					<view class="detail-lis" v-if="info.course_list && info.course_list.length">
						<view class="info-title">考试科目</view>
						<view class="lis-content">
							<view class="style1" v-for="(item, index) in info.course_list" :key="index">
								<view class="left">{{ item.key }}</view>
								<view class="right">{{ arrayToString(item.val) }}</view>
							</view>
						</view>
					</view>
					<!-- 考试总分及学制学费 -->
					<view class="detail-lis" v-if="info.score_price && info.score_price.length">
						<view class="info-title">考试总分及学制学费</view>
						<view class="lis-content">
							<view class="style1" v-for="(item, index) in info.score_price" :key="index">
								<view class="left">{{ item.key }}</view>
								<view class="right">{{ item.val || '--' }}</view>
							</view>
						</view>
					</view>
					<!-- 参考教材 -->
					<view class="detail-lis" v-if="info.textbook && info.textbook.length">
						<view class="info-title">参考教材</view>
						<view class="lis-content">
							<view class="style2" v-for="(item, index) in info.textbook" :key="index">{{ item }}</view>
						</view>
					</view>
					<!-- 招生专业对照表 -->
					<view class="detail-lis" v-if="info.college_university && info.college_university.length">
						<view class="info-title">招生专业对照表</view>
						<view class="lis-content">
							<view class="style2">{{ arrayToString(info.college_university) }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 表格数据 -->
			<view class="school-box">
				<!-- 查询 -->
				<view class="search-box">
					<listSelection
						v-for="(item, index) in searchArr"
						:checkInfo="item.checkInfo"
						:checkSearch="item.checkSearch"
						@confirm="(e) => confirm(e, index)"
						:key="index"
						:label="item.label || ''"
						:value="item.value || ''"
						:unit="item.unit"
						class="search-lis"
						:list="item.list"
						:placeholder="item.placeholder"
					></listSelection>
				</view>
				<view class="school-table baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<uni-table emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr tr_class="thead">
							<uni-th align="left" width="50%">院校名称</uni-th>
							<uni-th align="center" width="30%">考生类型</uni-th>
							<uni-th align="center" width="20%">招生人数</uni-th>
							<uni-th align="center" width="35%">学制学费</uni-th>
							<!-- <uni-th align="center" width="35%"></uni-th> -->
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in schoolList" :key="index">
							<uni-td align="left" width="50%">
								<view class="school-info">
									<view class="nature" v-if="item.school_type" :class="[schoolType[ item.school_type ]] ">{{ item.school_type }}</view>
									<view class="table-bold">{{ item.school_name }}</view>
								</view>
							</uni-td>
							<uni-td align="center" width="30%" class="table-bold">{{ item.stu_type }}</uni-td>
							<uni-td align="center" width="20%" class="table-bold" v-if="item.plan || item.plan === 0">{{ item.plan }}人</uni-td>
							<uni-td align="center" width="20%" class="table-bold" v-else>未公布</uni-td>
							<uni-td align="center" width="35%" class="table-bold">{{ item.system_price || '--' }}</uni-td>
							<!-- <uni-td align="center" width="35%">
								<view class="table-bold table-btn" @click.stop="recruitStudents(item)">查看历年招生人数</view>
							</uni-td> -->
							<template slot="tips">
								<view class="majortips">
									<view class="border-major">{{ item.major_name }}</view>
								</view>
								<view class="border-tips info_tips" v-if="item.remark">
									<uni-icons class="_flex" style="margin-right: 4rpx" type="info-filled" color="#E34D59"
										size="16"></uni-icons>
									<view class="single_row" :class="{ multiline: isOpenInfo[index] === 'open' }">
										{{ item.remark }}
									</view>
									<uni-icons
										@click="_toggle(item,index)"
										class="_flex"
										:class="[isOpenInfo[index]]"
										type="bottom"
										color="#E34D59"
										size="12"
									></uni-icons>	
								</view>
							</template>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view v-if="!notShowClaimOutLine" class="bottom_btn">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>
		<!-- 右边组件 -->
		<subfunction :scrollTop="topHeight" @_top="_top" @share="_shareOpen"></subfunction>
		<!-- 分享 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>

		<mBottomPopup :showBtns="false" @_close="showRecruitStudents = false" title="历年招生人数" :showPopup="showRecruitStudents">
			<view class="school-info-box" style="padding-bottom: 40rpx; box-sizing: border-box">
				<view class="school-info">
					<view class="nature" v-if="schoolInfo.school_type" :class="[schoolType[schoolInfo.school_type]]">{{ schoolInfo.school_type }}</view>
					<view class="table-bold">{{ schoolInfo.school_name }}</view>
				</view>
				<view class="majortips">
					<view class="border-major">{{ schoolInfo.major_name }}</view>
				</view>
				<view class="school-table echarts_box echarts_box_bg baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<qiun-data-charts
						v-if="showRecruitStudents"
						type="area"
						@complete="(e) => complete(e, 'heat', '人', controlLineInfo.index)"
						tooltipFormat="controlLineDemo"
						:opts="controlLineInfo.options"
						:chartData="controlLineInfo.chartsDataLine"
					/>
				</view>
			</view>
		</mBottomPopup>
	</scroll-view>
</template>

<script>
import subfunction from '../components/subfunction.vue';
import listSelection from '../components/listSelection.vue';
import mBottomPopup from '@/components/m-bottom-popup/m-bottom-popup.vue';
export default {
	components: {
		subfunction,
		listSelection,
		mBottomPopup
	},
	data() {
		return {
			isOpenInfo: {},
			scrollTop: 0,
			topHeight: 0,
			info: {},
			searchArr: [
				{
					key: 'year',
					list: [],
					unit: '年',
					checkSearch: '',
					checkInfo: {},
					placeholder: '考试年份'
				},
				{
					key: 'stu_type',
					list: [],
					checkSearch: '',
					checkInfo: {},
					placeholder: '考生类型'
				},
				{
					key: 'school_type',
					list: [],
					checkSearch: '',
					checkInfo: {},
					placeholder: '院校类型'
				}
			],
			showRecruitStudents: false,
			examReportInfo: {}, // 上个页面携带参数
			// echarts图配置
			controlLineInfo: {
				index: 0,
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					noteMerge: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '年份',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -25,
						titleOffsetX: -20,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						eachRange: 0,
						data: [
							{
								min: 0,
								// max: 600,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '人数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -6,
								titleOffsetX: 4
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF',
							unit: '人',
							data: []
						}
					}
				},
				chartsDataLine: {
					categories: [],
					series: [
						{
							name: '招生计划',
							data: []
						}
					]
				}
			},
			schoolList: [],
			schoolInfo: {}
		};
	},
	methods: {
		_toggle(item,index){
			let that = this;
			let _text = that.toggleTips(index, that.isOpenInfo);
			let obj = {
				[index]: _text
			}
			that.isOpenInfo = Object.assign({},that.isOpenInfo,obj);
		},
		// 查看历年招生人数
		recruitStudents(obj) {
			this.schoolInfo = obj;
			this.getPlanEcharts();
		},
		async getPlanEcharts() {
			let that = this;
			that.controlLineInfo.chartsDataLine.categories = [];
			that.controlLineInfo.chartsDataLine.series[0].data = [];
			let { code, data } = await that.$application_api.getPlanEcharts({
				major_id: that.schoolInfo.major_id,
				university_school_id: that.schoolInfo.university_school_id
			});
			if (code != 0) return;
			let year = that.searchArr[0].checkSearch;
			let _index = 0;
			if (data.echarts_data.year && data.echarts_data.year.length) {
				data.echarts_data.year.forEach((item, index) => {
					if (item === year) {
						_index = index;
					}
				});
			}
			that.controlLineInfo.index = _index;
			// X轴数据
			that.controlLineInfo.chartsDataLine.categories = data.echarts_data.year || [];
			// Y轴数据
			that.controlLineInfo.chartsDataLine.series[0].data = data.echarts_data.plan || [];
			let eachRange = Math.max.apply(null, data.echarts_data.plan);
			if (eachRange < 5) {
				eachRange = 10;
			} else {
				eachRange = 0;
			}
			that.controlLineInfo.options.yAxis.eachRange = eachRange;
			if (that.controlLineInfo.chartsDataLine.categories.length) {
				that.showRecruitStudents = true;
			}
		},
		async confirm(e, index) {
			if (this.searchArr[index].label) {
				this.searchArr[index].checkInfo = e;
			} else {
				this.searchArr[index].checkSearch = e;
			}
			await this.getUniversityMajorPlan();
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		},
		// 获取详情
		async getUniversityMajorMoreDetail() {
			let that = this;
			that.examReportInfo = uni.getStorageSync('examReportInfo');
			let { code, data } = await that.$application_api.getUniversityMajorMoreDetail(that.examReportInfo);
			if (code != 0) return;
			data.new_year = String(data.year).substr(-2, 2) + '年';
			that.info = data;
			await this.getUniversityMajorPlan();
		},
		// 获取表格数据
		async getUniversityMajorPlan() {
			let that = this;
			let obj = {
				major_id: that.examReportInfo.major_id
			};
			that.searchArr.forEach((item) => {
				obj[item.key] = item.checkSearch;
			});
			let { code, data } = await that.$application_api.getUniversityMajorPlan(obj);
			if (code != 0) return;
			that.searchArr.forEach(async (item, index) => {
				if (data[item.key]) {
					item.list = data[item.key].filter((lis) => !!lis);
				}
				if (item.key === 'year') {
					if (!item.checkSearch) {
						item.checkSearch = item.list[0];
						await that.getUniversityMajorPlan();
					} else {
						that.schoolList = data.all_data || [];
					}
				}
			});
		}
	},
	onLoad(){
		getApp().globalData.isLiscation = true;
	},
	mounted() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: ''
		});
		this.getUniversityMajorMoreDetail();
	},
	onUnload() {
		uni.removeStorageSync('examReportInfo');
	}
};
</script>

<style lang="scss" scoped>
._page {
	width: 100vw;
	min-height: 100vh;
	background-color: #f4f5f7;
	box-sizing: border-box;
	padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
	&.nonePadding {
		padding-bottom: 0;
	}
}

._bg {
	width: 100vw;
	background: url('https://bicpic.baikewang.com/images/1690860206689.png');
	background-repeat: no-repeat;
	background-position: 145% 0;
	background-size: 75vw auto;
	background-color: #205bd0;
}

.info-box {
	width: 100vw;
	padding: 60rpx 38rpx 0;
	box-sizing: border-box;
	.title-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.title {
			font-weight: bold;
			font-size: 39rpx;
			color: #ffffff;
			margin-right: 10rpx;
		}
		.type {
			display: inline-block;
			font-size: 24rpx;
			color: #ffffff;
			padding: 3rpx 6rpx;
			box-sizing: border-box;
			border-radius: 6rpx;
			background-color: rgba(255, 255, 255, 0.2);
		}
	}
	.major {
		margin-top: 15rpx;
		font-size: 27rpx;
		color: #ffffff;
	}

	.statistics-box {
		margin-top: 33rpx;
		width: 100%;
		padding: 35rpx 33rpx 55rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.2);
		display: grid;
		grid-template-areas: '. .';
		grid-gap: 0 40rpx;

		._lis {
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 27rpx;
			margin-top: 8rpx;
			.text {
				color: rgba(255, 255, 255, 0.6);
				margin-right: 12rpx;
			}
			.value {
				color: #ffffff;
				font-weight: bold;
			}
		}
	}
}

.detail-box {
	width: 100vw;
	min-height: 22vh;
	margin-top: -20rpx;
	border-radius: 29rpx 29rpx 0 0;
	overflow: hidden;
	background-color: #ffffff;
	position: relative;
	padding: 60rpx 40rpx 30rpx;
	box-sizing: border-box;
	border-top: 4rpx solid #ffffff;
	&::before {
		content: '';
		width: 100%;
		height: 140rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		background: linear-gradient(to bottom, rgba(198, 213, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	.detail-lis {
		margin-bottom: 45rpx;
		position: relative;
		z-index: 1;
		.info-title {
			font-size: 34rpx;
			color: #121317;
			font-weight: bold;
		}
		.lis-content {
			margin-top: 14rpx;
			.style1 {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 6rpx;
				.left {
					font-size: 27rpx;
					color: #858688;
				}
				.right {
					color: #121317;
					font-size: 27rpx;
					margin-left: 20rpx;
				}
			}
			.style2 {
				font-size: 27rpx;
				color: #121317;
			}
		}
	}
}

.school-box {
	width: 100vw;
	padding: 58rpx 0 80rpx 39rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
	background-color: #ffffff;
	.search-box{
		padding-right: 39rpx;
		box-sizing: border-box;
	}
}
</style>
